<template>
    <div>
      <h1>姓名：{{name}}</h1>
      <h2>年龄：{{age}}</h2>
      <h3>喜欢的水果：{{likeFood.fruits.apple}}</h3>
      <button @click="name += '~'">修改姓名</button>
      <button @click="updata">修改年龄</button>
      <button @click="updata1">修改水果</button>
    </div>
  </template>
   
  <script>
  import {reactive, toRefs, shallowReactive} from 'vue'
  export default {
    name: "App",
    setup() {
      // 定义了一段数据
    //   let person = shallowReactive({    // 只将第一层数据做了响应式处理 
    //     name: '张三',
    //     age: 18,
    //     likeFood: {
    //       fruits:{
    //         apple: '苹果'               // 深层次的数据将会是一个普通的对象
    //       }
    //     }
    //   })
    //   const updata = ()=>{
    //     person.age++
    //   }
    //   const updata1 = ()=>{
    //     person.likeFood.fruits.apple += '！'
    //   }

      function Person(){

      }
      Person.prototype.eat = function(){
        console.log("eat");
      }
      function Per(){

      }
      Per.prototype.walk = function(){
        console.log("stu");
      }
      Per.prototype=new Person()
      var p1 =new Per()
      p1.eat()
      p1.walk()
      // 将数据返回出去
      return {
        // ...toRefs(person),
        // updata,
        // updata1
      }
    }
  };
  </script>